<!--
 * @FileDescription 协议进制转换工具
 * @Author 杨宇翔
 * @Date 20220628 11:12:08
 * @LastEditors 杨宇翔
 * @LastEditTime 20220628 11:12:08
-->
<template>
    <div class="protocol-tool" v-show="ProtocolComponent.Default.ShowTool.value">
        <div class="container" v-drag.offset.clamp drag-trigger>
            <div class="header" drag-trigger>
                <span>进制转换器</span>
                <span class="material-icons" @click="ProtocolComponent.Default.ShowTool.value = false">×</span>
            </div>

            <div class="layout">
                <span></span>
                <span>二进制</span>
                <span>十进制</span>
                <span>十六进制</span>

                <span>输入</span>
                <input class="reset" type="string" @input="valueBinary = valueBinary.toString().replace(/[^01]/g, '')"
                    v-model="valueBinary">
                <input class="reset" type="string"
                    @input="valueDecimal = valueDecimal.toString().replace(/[^0123456789]/g, '')"
                    v-model="valueDecimal">
                <input class="reset" type="string"
                    @input="valueHex = valueHex.toString().replace(/[^0123456789ABCDEFabcdef]/g, '')"
                    v-model="valueHex">

                <i></i><i></i><i></i><i></i>

                <span>二进制</span>
                <input class="reset" type="string" readonly :value="valueBinary">
                <input class="reset" type="string" readonly
                    :value="ProtocolComponent.Default.Convert(valueDecimal, 10, 2)">
                <input class="reset" type="string" readonly :value="ProtocolComponent.Default.Convert(valueHex, 16, 2)">

                <span>十进制</span>
                <input class="reset" type="string" readonly
                    :value="ProtocolComponent.Default.Convert(valueBinary, 2, 10)">
                <input class="reset" type="string" readonly :value="valueDecimal">
                <input class="reset" type="string" readonly
                    :value="ProtocolComponent.Default.Convert(valueHex, 16, 10)">

                <span>十六进制</span>
                <input class="reset" type="string" readonly
                    :value="ProtocolComponent.Default.Convert(valueBinary, 2, 16)">
                <input class="reset" type="string" readonly
                    :value="ProtocolComponent.Default.Convert(valueDecimal, 10, 16).toUpperCase()">
                <input class="reset" type="string" readonly :value="valueHex">
            </div>

            <button class="reset" type="button" @click="OnClear">
                <span>清空</span>
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ProtocolComponent } from './LidarComponent';

const valueBinary = ref('');
const valueDecimal = ref('');
const valueHex = ref('');

function OnClear(): void {
    valueBinary.value = '';
    valueDecimal.value = '';
    valueHex.value = '';
}
</script>

<style scoped>
.protocol-tool {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    backdrop-filter: blur(1rem);
}

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 83.5rem;
    height: 52.5rem;

    display: flex;
    flex-direction: column;
    align-items: center;

    border-radius: 2rem;
    border: solid 0.6rem transparent;
    background-image: linear-gradient(#131620, #131620),
        linear-gradient(90deg, #218cde, #807de1);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.header {
    width: 100%;

    padding: 2rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header>span:first-of-type {
    color: white;
    font-size: 2.4rem;
    font-weight: 500;
}

.header>.material-icons {
    color: #81859C;
    font-size: 3.6rem;
}

.container>span {
    padding-left: 3.4rem;
    width: 100%;

    color: #81859C;
    font-size: 2.4rem;
    font-weight: 500;
}

.layout {
    display: grid;

    grid-template-columns: 10rem 20rem 20rem 20rem;
    grid-template-rows: repeat(2, 3.6rem) 0 repeat(3, 3.6rem);

    gap: 2rem;
}

.layout>span {
    height: 3.6rem;

    color: #81859C;
    font-size: 1.8rem;
    line-height: 3.6rem;
}

.layout>span:nth-of-type(n-5) {
    text-align: center;
}

.layout>span:nth-of-type(n+5) {
    padding-right: 2.5rem;
    text-align: right;
}

.layout>input {
    width: 20rem;
    height: 3.6rem;

    color: #B1B1D4;
    font-size: 1.8rem;
    line-height: 3.6rem;
    text-align: center;

    border: solid 0.1rem #36384B;
}

.layout>input:focus {
    border: solid 0.1rem;
    border-image: linear-gradient(90deg, rgba(128, 125, 225, 1), rgba(33, 140, 222, 1)) 1 1;
}

.layout>input::-webkit-inner-spin-button,
.layout>input::-webkit-outter-spin-button {
    display: none;
}

.container>button {
    margin-top: 6rem;

    width: 16rem;
    height: 5.5rem;

    border-radius: 0.6rem;
}

.container>button {
    background: #D14D49;
}

.container>button>span {
    color: white;
    font-size: 2.4rem;
    font-weight: 500;
    text-align: center;
    line-height: 5.5rem;
}
</style>./LidarComponent